function echarts_1(){
	var myChart = echarts.init(document.getElementById("echarts_1"));
	var app = {};
	option = null;
	var data_gongdan = [{
		name: '表扬',
		value: [1, , , , , , , , , ]
	}, {
		name: '综合业务',
		value: [, ,3, , , , , , ,1]
	}, {
		name: '意见',
		value: [5,3,6,2,5,2,12,6,2,2]
	}, {
		name: '业务咨询',
		value: [, ,1, ,1, ,4, , , ]
	}, {
		name: '投诉',
		value: [, ,1, , , ,1, , ,3]
	}, {
		name: '服务申请',
		value: [4,4,18,1,4,1,24,2,1,5]
	}]
	var data_baoxiu = [{
		 name:'故障报修',
		 value:[14, 10, 67, 5, 25, 19, 113, 32, 3, 14]
	}]
	option = {
		legend:{
			top: 10,
			right: 80,
			itemWidth: 10,
			itemHeight: 10,
			data: ['表扬','综合业务','意见','业务咨询','投诉','服务申请','故障报修'],
			textStyle: {
				color: 'white',
				fontStyle: 'normal',
				fontFamily: '微软雅黑',
				fontSize: 12,
			}
		},
		xAxis: {
			type: 'category',
			data: ['桥头', '乌牛', '东城', '沙头', '桥下', '黄田', '瓯北', '岩头', '岩坦', '碧莲'],
			axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: 'white',
			}
		},
		yAxis: [{
			type: 'value',
			max: 30,
			splitLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisLabel: {
				color: 'white',
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show:false
			}
		},{
            type: 'value',
            max: 120,
            interval: 20,
			splitLine: {
				show: false,
			},
            axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: '#ff999e',
			}
        }],
		series: []
	};

	var color = ['#7ba8f0', '#864cfc', '#4eb6c3', '#1a67c1', '#2e9646', '#ca792b'];
	for(var i = 0; i < data_gongdan.length; i++) {
		option.series.push({
			name: data_gongdan[i].name,
			type: 'bar',
			label: {
				show: true,
				position: 'top',
				formatter: '{c} ',
				color:'white'
			},
			data: data_gongdan[i].value,
			itemStyle: {
				color: color[i]
			}
		});
	};
	for(var i = 0; i < data_baoxiu.length; i++) {
		option.series.push({
			name: data_baoxiu[i].name,
			type: 'bar',
            yAxisIndex: 1,
			label: {
				show: true,
				position: [1,-15],
				color: '#ff999e',
				formatter: '{c}'
			},
			data: data_baoxiu[i].value,
			itemStyle: {
				color: '#9c212f'
			}
		});
	};
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}

}

function echarts_2() {
	var myChart = echarts.init(document.getElementById("echarts_2"));
	var app = {};
	option = null;
	option = {
		legend:{
			top: 10,
			right: 80,
			data: ['当月值 ( % )','累计值 ( % )'],
			textStyle: {
				color: 'white',
				fontStyle: 'normal',
				fontFamily: '微软雅黑',
				fontSize: 12,
			}
		},
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            },
            axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisLabel: {
				color: 'rgba(219,219,219,0.7)',
				margin:-85
			},
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: -40,
            max: 60,
            interval: 10,
        	splitLine: {
        		show: false
        	},
            axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: 'white',
			}
        }
    ],
    series: [
        {
            name:'当月值 ( % )',
            type:'line',
            smooth: true,
			symbol: 'circle',
			symbolSize: 9,
            itemStyle: {
					normal: {
						color: '#27c065'
					}
				},
            label: {
				show: true,
				position: 'top',
				formatter: '{c}'
			},
            data:[-13.31, -30.26, 50.99, 0.06, 0.02, 6.56]
        },
        {
            name:'累计值 ( % )',
            type:'line',
            smooth: true,
			symbol: 'circle',
			symbolSize: 9,
            itemStyle: {
					normal: {
						color: '#01cbe5'
					}
				},
            label: {
				show: true,
				position: [15, -10],
				formatter: '{c}'
			},
            data:[-13.31, -19.57, 0.02, 0.03, 0.03, 1.21]
        }
    ]
};

	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}

function echarts_3() {
	var myChart = echarts.init(document.getElementById("echarts_3"));
	var app = {};
	option = null;
	option = {
		legend:{
			top: 10,
			right: 80,
			itemWidth: 10,
			itemHeight: 10,
			data: ['17年售电量','18年售电量','18年同比增长'],
			textStyle: {
				color: 'white',
				fontStyle: 'normal',
				fontFamily: '微软雅黑',
				fontSize: 12,
			}
		},
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            },
            axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisLabel: {
				color: 'white',
			},
			nameTextStyle:{
				color: 'white'
			}
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: 0.0,
            max: 3.5,
            interval: 0.5,
        	splitLine: {
        		show: false
        	},
            axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: 'white',
			}
        },
        {
            type: 'value',
            min: -30,
            max: 40,
            interval: 10,
        	splitLine: {
        		show: false
        	},
            axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: 'white',
			}
        }
    ],
    series: [
        {
            name:'17年售电量',
            type:'bar',
            barWidth: '20%',
            itemStyle: {
					normal: {
						color: '#16b433'
					}
				},
            data:[2.21, 1.34, 1.94, 2.25, 2.14, 2.14, 2.18, 2.80, 2.93, 2.34, 2.23, 2.20]
        },
        {
            name:'18年售电量',
            type:'bar',
            barWidth: '20%',
            itemStyle: {
					normal: {
						color: '#00bdd5'
					}
				},
            label: {
				show: true,
				position: 'top',
				formatter: '{c}'
			},
            data:[2.84, 1.83, 1.50, 2.50, 2.44, 2.29]
        },
        {
            name:'18年同比增长',
            type:'line',
            yAxisIndex: 1,
			symbol: 'circle',
			symbolSize: 9,
            itemStyle: {
					normal: {
						color: '#ffd503'
					}
				},
            smooth: true,
            label: {
				show: true,
				position: 'top',
				formatter: '{c} %'
			},
            data:[28.67, 32.26, 14.18, -24.22, 15.47, 8.14]
        }
    ]
};

	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}


function echarts_5_2() {
	var myChart = echarts.init(document.getElementById("echarts_5_2"));
	var app = {};
	option = null;
	var data = [48.7,70.1,27.7,35,5.4,122.5,3.6,,,,9.2,84.3,11.7];
	var data1 = [281.7,197,257.9,31.5,68.8,106.2,15.2,173.2,58.3,79.6,115.6,,18.1];
	option = {
    color: ['#20dcdd','#c9d81f'],
    legend:{
			top: 10,
			right: 80,
			itemWidth: 10,
			itemHeight: 10,
			data: ['支线时户数','主线时户数'],
			textStyle: {
				color: 'white',
				fontStyle: 'normal',
				fontFamily: '微软雅黑',
				fontSize: 12,
			}
		},
    xAxis : [
        {
            type : 'category',
            data : [' 界坑 712线', ' 岭头 921线', ' 西坑 922线', ' 五尺 903线', ' 银都 930线', ' 陡门 545线', ' 岙底 776线', ' 北岙 619线', ' 东皋 925线', ' 张溪 773线', ' 里溪 910线', ' 陆岙 582线', ' 铁坑 772线'],
            axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
            formatter: function(value) {
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 4; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) //如果类目项的文字大于3,
                {
                    for (var i = 0; i < rowN; i++) {
                        var temp = ""; //每次截取的字符串
                        var start = i * maxLength; //开始截取的位置
                        var end = start + maxLength; //结束截取的位置
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串
                    }
                    return ret;
                } else {
                    return value;
                }
            },
            interval: 0,
            color: 'white',
            rotate:-90
        },
			nameTextStyle:{
				color: 'white'
			}
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitLine: {
				show: false
			},
			axisLabel: {
				color: 'white',
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			}
        }
    ],
    series : [
        {
        	name:'支线时户数',
            type:'line',
			symbol: 'circle',
			symbolSize: 10,
            barWidth: '20%',
            data:data,
			label: {
				show: true,
				position: 'right',
				formatter: '{c|{c}}',
				backgroundColor:'rgba(0,0,0,0.3)',
                borderColor: 'auto',
                borderWidth: 1,
                borderRadius: 4,
                rich:{
                	 c: {
                            padding:[5,10,5,10]
                        },
                }
			},
        },{
        	name:'主线时户数',
            type:'line',
			symbol: 'circle',
			symbolSize: 10,
            barWidth: '20%',
            data:data1,
			label: {
				show: true,
				position: 'top',
				formatter: '{c|{c}}',
				backgroundColor:'rgba(0,0,0,0.3)',
                borderColor: 'auto',
                borderWidth: 1,
                borderRadius: 4,
                rich:{
                	 c: {
                            padding:[5,10,5,10]
                        },
                }
			},
        }
    ]

	};

	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}
function echarts_5_1() {
	var myChart = echarts.init(document.getElementById("echarts_5_1"));
	var app = {};
	option = null;
	var data = [4,3,1,2,2,1,1,,,,1,2,1];
	var data1 = [1,2,3,1,1,1,1,2,2,2,1,,1];
	option = {
    color: ['#d04533','#13bd4b'],
    legend:{
			top: 10,
			right: 80,
			itemWidth: 10,
			itemHeight: 10,
			data: ['支线','主线'],
			textStyle: {
				color: 'white',
				fontStyle: 'normal',
				fontFamily: '微软雅黑',
				fontSize: 12,
			}
		},
    xAxis : [
        {
            type : 'category',
            data : [' 界坑 712线', ' 岭头 921线', ' 西坑 922线', ' 五尺 903线', ' 银都 930线', ' 陡门 545线', ' 岙底 776线', ' 北岙 619线', ' 东皋 925线', ' 张溪 773线', ' 里溪 910线', ' 陆岙 582线', ' 铁坑 772线'],
            axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
            formatter: function(value) {
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 4; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) //如果类目项的文字大于3,
                {
                    for (var i = 0; i < rowN; i++) {
                        var temp = ""; //每次截取的字符串
                        var start = i * maxLength; //开始截取的位置
                        var end = start + maxLength; //结束截取的位置
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串
                    }
                    return ret;
                } else {
                    return value;
                }
            },
            interval: 0,
            color: 'white',
            rotate:-90
        },
			nameTextStyle:{
				color: 'white'
			}
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisLabel: {
				color: 'white',
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show:false
			}
        }
    ],
    series : [
        {
        	name:'支线',
            type:'bar',
            barWidth: '20%',
            data:data,
			label: {
				show: true,
				position: 'top',
				formatter: '{c} ',
				color:'white'
			},
        },{
        	name:'主线',
            type:'bar',
            barWidth: '20%',
            data:data1,
			label: {
				show: true,
				position: 'top',
				formatter: '{c} ',
				color:'white'
			},
        }
    ]

	};

	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}


function echarts_6() {
	var myChart = echarts.init(document.getElementById("echarts_6"));
	var app = {};
	option = null;
	var data = [3,1,0,29,14,2,1,109,36,45,240];
	option = {
    color: ['#3398DB'],
    xAxis : [
        {
            name: '服务区',
            type : 'category',
            data : ['桥头', '上塘', '东城', '沙头', '桥下', '黄田', '瓯北', '岩头', '岩坦', '碧莲', '永嘉'],
            axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: 'white',
			},
			nameTextStyle:{
				color: 'white'
			}
        }
    ],
    yAxis : [
        {
            name: '台区数',
            type : 'value',
            splitLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisLabel: {
				color: 'white',
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show:false
			},
			nameTextStyle:{
				color: 'white',
				padding:[0,30,0,0]
			}
        }
    ],
    series : [
        {
            type:'bar',
            barWidth: '40%',
            data:data,
			label: {
				show: true,
				position: 'top',
				formatter: '{c} ',
				color:'white'
			},
        }
    ]

	};

	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}

function echarts_7() {
	var myChart = echarts.init(document.getElementById("echarts_7"));
	var app = {};
	option = null;
	var data_gongdan = [{
		name: '电费',
		value: [1, , , , , , , , , ]
	}, {
		name: '频繁停电',
		value: [, , , , , , , 1, , ]
	}, {
		name: '其他人员 服务规范',
		value: [1, , , , , , , , , ]
	}, {
		name: '欠费停复电',
		value: [1, , , , , , , , , ]
	}, {
		name: '无故停电',
		value: [, , 1, , , , , , , ]
	}, {
		name: '营业厅人员 服务规范',
		value: [, , , , , , 1, , , ]
	}]

	option = {
		legend:{
			top: 10,
			right: 80,
			itemWidth: 10,
			itemHeight: 10,
			data: ['电费','频繁停电','其他人员 服务规范','欠费停复电','无故停电','营业厅人员 服务规范',],
			textStyle: {
				color: 'white',
				fontStyle: 'normal',
				fontFamily: '微软雅黑',
				fontSize: 12,
			}
		},
		xAxis: {
			type: 'category',
			data: ['桥头', '乌牛', '东城', '沙头', '桥下', '黄田', '瓯北', '岩头', '岩坦', '碧莲'],
			axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: 'white',
			}
		},
		yAxis: {
			type: 'value',
			max: 5,
			splitLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisLabel: {
				color: 'white',
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show:false
			}
		},
		series: []
	};

	var color = ['#864cfc', '#4eb6c3', '#1a67c1', '#2e9646', '#ca792b', '#8a3148'];
	for(var i = 0; i < data_gongdan.length; i++) {
		option.series.push({
			name: data_gongdan[i].name,
			type: 'bar',
			label: {
				show: true,
				position: 'top',
				formatter: '{c} ',
				color:'white'
			},
			data: data_gongdan[i].value,
			itemStyle: {
				color: color[i]
			}
		});
	};

	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}

function echarts_8() {
	var myChart = echarts.init(document.getElementById("echarts_8"));
	var app = {};
	option = {
		legend: {
			top: 20,
			right: 20,
			itemWidth: 15,
			itemHeight: 15,
			itemGap: 10,
			borderRadius: 4,
			data: ['故障平均修复时长（分钟）', '平均到达现场时间（分钟）'],
			textStyle: {
				color: 'white',
				fontStyle: 'normal',
				fontFamily: '微软雅黑',
				fontSize: 12,
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['桥头', '乌牛', '东城', '沙头', '桥下', '黄田', '瓯北', '岩头', '岩坦', '碧莲', '永嘉'],
			axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: 'white',
			}
		},
		yAxis: {
			logBase: 3,
			type: 'log',
			splitLine: {
				show: false
			},
			axisLabel: {
				show: false
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: '#4277ff'
				}
			}
		},
		series: [{
			name: '故障平均修复时长（分钟）',
			data: [60.07, 129.50, 47.19, 41.10, 56.46, 109.59, 60.60, 113.56, 60.67, 104.00, 69.69],
			type: 'line',
			symbol: 'circle',
			symbolSize: 10,
			label: {
				show: true,
				position: 'top',
				formatter: '{c} m'
			},
			smooth: true,
			itemStyle: {
				color: '#00baef'
			},
			lineStyle: {
				color: '#00baef'
			},
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 0.6,
					colorStops: [{
						offset: 0,
						color: '#00baef' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(0, 186, 239, 0)' // 100% 处的颜色
					}],
				}
			},
		}, {
			name: '平均到达现场时间（分钟）',
			data: [34.00, 34.92, 21.22, 20.60, 21.27, 32.24, 26.35, 24.53, 29.33, 21.31, 25.31],
			type: 'line',
			smooth: true,
			symbol: 'circle',
			symbolSize: 10,
			label: {
				show: true,
				position: 'top',
				formatter: '{c} m'
			},
			itemStyle: {
				color: '#fbae1f'
			},
			lineStyle: {
				color: '#fbae1f'
			},
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 0.6,
					colorStops: [{
						offset: 0,
						color: '#fbae1f' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(251, 174, 31, 0)' // 100% 处的颜色
					}],
				}
			}
		}]
	};

	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}

function echarts_9() {
	var myChart = echarts.init(document.getElementById("echarts_9"));
	var app = {};
	option = null;
	var data_dongtai = [{
		name: "等待施工",
		value: 26
	}, {
		name: "已竣工，等待结算",
		value: 40
	}, {
		name: "施工中",
		value: 15
	}, {
		name: "已全部结束",
		value: 52
	}];
	var total = 0;
	for(var i = 0; i < data_dongtai.length; i++) {
		total += data_dongtai[i].value;
	}
	var labelFromatter = {
		normal: {
			label: {
				show: true,
				position: 'center',
				formatter: function(params) {
					var percent = 0;

					percent = ((params.value / total) * 100).toFixed(2);
					if(params.name !== '') {
						return '{white|' + percent + '%}';
					} else {
						return '';
					}

				},
				rich: {
					white: {
						fontSize: 18,
						fontWeight: 'bold',
						color: 'white',
						padding: [4, 4, 15, 4]
					}
				},
				position: 'center'
			}
		}
	}
	var radius = [45, 60];
	var h = ['20%', '20%', '65%', '65%']
	var w = ['30%', '80%', '30%', '80%']
	var label_dongtai = [];
	for(var i = 0; i < data_dongtai.length; i++) {
		label_dongtai.push(data_dongtai[i].name);
	}

	option = {
		series: []
	};
	var color = ['#fc8057','#0abb76','#e8b146','#00c6ff']
	for(var i = 0; i < data_dongtai.length; i++) {
		option.series.push({
			type: 'pie',
			center: [h[i], w[i]],
			radius: radius,
			x: '0%',
			itemStyle: labelFromatter,
			data: [{
				name: data_dongtai[i].name,
				value: data_dongtai[i].value,
				itemStyle: {
					normal: {
						color: color[i]
					}
				}
			}, {
				name: '',
				value: total - data_dongtai[i].value,
				itemStyle: {
					normal: {
						color: 'rgba(33,69,143,0.9)'
					},
					emphasis: {
						color: 'rgba(0,0,0,0)'
					}
				}
			}]
		});
	};
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}


//进度条


$(function(){
	//a 底色，b 加载色 , w 展示宽度，h 展示高度
	var a="#01dcf3";
	var b="#dfdfdf";
	var w="100px";
	var h="10px";
	var div=$(".div");//进度条要插入的地方
	var barb=function(){
		div.each(function(){
			var width=$(this).attr('w');
			var barbox='<dl class="barbox"><dd class="barline"><div w="'+width+'" class="charts" style="width:0px"><d style="padding-left: 105px;"></d></div></dd></dl>';
			$(this).append(barbox);
		})
	}
	
	var amimeat=function(){
		$(".charts").each(function(i,item){
			var wi=$(this).attr("w");
			$(item).animate({width: wi+"%"},1000,function(){//一天内走完
				$(this).children('d').html(wi+"%");
			});
		});
	}
	var barbCss=function(a,b){
		$(".barbox").css({
			"height":h,
			"line-height":h,
			"text-align":"center",
			"color":"#fff",
		})
		$(".barbox>dd").css({
			"float":"left"
		})	
		$(".barline").css({
			"width":w,
			"background":b,
			"height":h,
//			"overflow":"hidden",
			"display":"inline",
			"position":"relative",
			"border-radius":"8px",
		})
		$(".barline>d").css({
			"position":"absolute",
			"top":"0px",
		})
		$(".charts").css({
			"background":a,
			"height":h,
			"width":"0px",
			"overflow":"hidden",
			"border-radius":"8px"
		})
	}
	barb();
	amimeat();
	barbCss(a,b);
})

